<template>
    <div style="width: 500px; height: 100px">
        <div class="mapp" ref="baiduRef">
            <div class="content"></div>
        </div>
    </div>
</template>
<script  >
import { onMounted, ref } from "vue";
import { useRoute } from 'vue-router';
import request from '@/utils/request';

export default {
    setup() {
        // 地图嵌入
        const baiduRef = ref();
        const map = ref();
        const point = ref();
        const marker = ref();
        const opts = ref({
            width: 250, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: "塔里木大学", // 信息窗口标题
        });
        const top_left_navigation = ref();
        const infoWindow = ref();
        const myCity = ref();
        const Data2 = ref([])


        async function initMap() {
            const route = useRoute();
            console.log(route.query.id);
            let longitude = 0; // 创建一个变量来保存经度值
            let latitude = 0; // 创建一个变量来保存经度值
            const handleEdit = async () => {
                const result = await request.get(`manager/passenger/${route.query.id}`);
                if (result.success) {
                    longitude = result.data[0].passengerTripLocation.longitude; // 将经度值保存在变量中
                    latitude = result.data[0].passengerTripLocation.latitude; // 将经度值保存在变量中
                }
            };
            await handleEdit(); // 调用handleEdit函数获取经度值
            map.value = new BMap.Map(baiduRef.value);
            point.value = new BMap.Point(longitude, latitude);
            marker.value = new BMap.Marker(point.value);
            myCity.value = new BMap.LocalCity();
            map.value.centerAndZoom(point.value, 15);
            map.value.enableScrollWheelZoom(true);
            map.value.addOverlay(marker.value);
            // 创建比例尺控件并添加到地图
            top_left_navigation.value = new BMap.ScaleControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
            });
            map.value.addControl(top_left_navigation.value);
            // 设置地图样式
            map.value.setMapStyleV2({
                styleId: "1fb853a740649182c004c7f05e3f1ac7",
            });
            infoWindow.value = new BMap.InfoWindow(
                "地址阿拉尔市塔里木大学",
                opts.value
            );

            map.value.addEventListener("click", function (e) {
                alert("当前经纬度是" + e.point.lng + ", " + e.point.lat);
            });

        }
        onMounted(() => {
            initMap();
        });
        return {
            baiduRef,
        };
    },
};
</script>
 
<style scoped>
.homebox {
    width: 100%;
    height: 100vh;
    position: relative;
}

.head {
    height: 100px;
    background: #071f4d;
}

.headimg {
    width: 100%;
    height: 100%;
}

.mapp {
    position: absolute;
    width: 100%;
    height: 498px;
    top: 60px;
}

.content {
    height: calc(100vh - 100px);
    display: flex;
}
</style>
 